<template>
  <div class="content-body">
    <!-- <div class="content-header">
      <div class="relative"><tabMenuSub /></div>
      <div><slot name="header" /></div>
    </div> -->
    <div class="content-render">
      <div class="content-container">
        <div v-if="filter" class="content-search">
          <div class="filter-wrap">
            <div class="filter-item">
              <div class="filter-input-control"><a-input :placeholder="placeholder" /></div>
            </div>
            <div class="filter-item">
              <ul class="filter-icon">
                <li @click="search" v-if="$slots.search">
                  <i></i>
                  <a-popover placement="bottom" trigger="click" overlayClassName="filter_search" v-model:open="popoverOpen">
                    <template #content>
                      <slot name="search" />
                    </template>
                    <template #title>
                      <div class="filter-title">
                        <span>筛选</span>
                        <div class="reset">
                          <sync-outlined :style="{ fontsize: '6px' }" />
                          <span class="word">重置</span>
                          <CloseOutlined :style="{ fontsize: '14px', position: 'absolute', right: '-20px', top: '3px' }" @click="cancel" />
                        </div>
                      </div>
                    </template>
                    <span class="label">筛选</span>
                  </a-popover>
                </li>
                <li>
                  <i></i>
                  <span>刷新</span>
                </li>
              </ul>
            </div>
            <div class="filter-item">
              <div class="filter-count">
                <span class="count-number">189,999</span>
                <span>条数据</span>
              </div>
            </div>
          </div>
          <div v-if="$slots.operate">
            <slot name="operate" />
          </div>
        </div>
        <div class="content-inner" @scroll="handlerScroll"><slot /></div>
        <!-- <div class="content-footer" v-if="page">
          <a-pagination
            v-model:current="current"
            show-quick-jumper
            :total="total"
          />
        </div> -->
      </div>
    </div>
    <!-- <template #=""></template> -->
  </div>
</template>
<script setup>
  import { ref, onActivated, nextTick, computed } from "vue"
  import { useRouter } from "vue-router"
  import { useTable } from "@/hook/index"
  import { CloseOutlined, SyncOutlined } from "@ant-design/icons-vue"
  import tabMenuSub from "../components/header/tabsMenuSub/index.vue"
  // router
  const router = useRouter()
  /**
   * props
   */
  const props = defineProps({
    filter: {
      type: Boolean,
      default: true,
    },
    placeholder: {
      type: String,
      default: "",
    },
  })
  /**
   * hook
   */
  const { getTotal } = useTable()
  /** ref */
  const scrollTop = ref(0)
  const current = ref(1)
  const total = computed(() => getTotal())

  /**
   * 初始化滚动位置
   */
  const initScroll = () => {
    const renderContent = document.getElementsByClassName("content-inner")[0]
    renderContent && (renderContent.scrollTop = scrollTop.value)
  }

  /**
   * 记录滚动位置
   */
  const handlerScroll = (e) => (scrollTop.value = e.target.scrollTop)

  /** 路由信息 */
  const routerInfo = () => router.currentRoute.value
  /**
   * 获取子级路由
   */
  const getChildrenRouter = () => {
    const routers = routerInfo().matched?.[1]
    return routers?.children || []
  }

  const popoverOpen = ref(false)
  const cancel = () => {
    popoverOpen.value = false
  }
  const sure = () => {
    popoverOpen.value = false
  }

  /**
   * 生命周期
   */
  onActivated(async () => {
    await nextTick()
    initScroll()
  })
</script>
<style lang="scss" scoped>
  .content-body {
    display: flex;
    height: 100%;
    flex-direction: column;
  }
  .content-header {
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: 0 16px;
    border-bottom: 1px solid var(--n-black-border);
    height: var(--n-header-menu-height);
    > div:first-child {
      flex: 1;
      width: 0;
    }
    > div:last-child {
      padding: 0 20px;
    }
  }
  .content-render {
    flex: 1;
    height: 0;
    padding: 12px 16px 16px;
    box-sizing: border-box;
  }
  .content-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #fff;
  }
  .content-inner {
    flex: 1;
    height: 0;
    overflow-y: auto;
  }
  .content-search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
  }
  .content-footer {
    padding-top: 16px;
    text-align: right;
  }
  .filter-input-control {
    position: relative;
    width: 184px;
    margin-right: 8px;
    padding-right: 16px;
    &:after {
      content: "";
      display: block;
      position: absolute;
      right: 0;
      top: 9px;
      height: 14.5px;
      border-left: 1px solid var(--n-black-border);
    }
  }
  .filter-wrap {
    display: flex;
    align-items: center;
  }
  .filter-icon {
    display: flex;
    li {
      display: flex;
      padding: 0 8px;
      align-items: center;
      height: 32px;
      transition: var(--n-transition);
      cursor: pointer;
      color: var(--n-black-light-1);
      &:hover {
        background-color: var(--n-black-hover);
      }
      &:active {
        color: var(--n-primary);
        background-color: var(--n-primary-bg);
      }
    }
    i {
      width: 16px;
      height: 16px;
      background-color: #ccc;
    }
    span,
    .label {
      margin-left: 4px;
    }
  }
  .filter-count {
    margin-left: 16px;
    color: var(--n-black-light-3);
    .count-number {
      color: var(--n-black-light-1);
    }
  }
  .filter_search {
    .filter-title {
      display: flex;
      justify-content: space-between;
      font-size: 16px;
      color: var(--n-black-light-1);
      .reset {
        position: relative;
        font-weight: normal;
        color: var(--n-black-light-3);
        font-size: 15px;
        .word {
          margin-left: 4px;
          margin-right: 8px;
        }
      }
    }
  }
</style>
